/**
 * 客户订货系统，属于杭州升鲜宝科技有限公司，由升鲜宝团队开发
 * 主要特点：不同的客户登录，显示不同的商品，不同的商品价格
 * 内置了简易的进销存系统，方便升鲜宝的客户的客户进行简易的出库、入库、盘点、报损、库存查询
 * 升鲜宝供应商管理系统，全套系统授权源代码使用。方便有一定开发能力的公司与团队进行快速的供应链管理系统开发与应用
 * 联系方式：微信 13858022914  
 * 联系人： 余东升
 * 手机号码： 15382353715
 * 
 */
<template>
  <view class="orderListItem" @click="handleDetail">
    <view class="code">{{ data.orderCode }}</view>
    <view class="time"
      >送货日期：{{ $u.timeFormat(data.deliveryDateTime, "yyyy-mm-dd") }}</view
    >
    <view class="remark">备注：{{ data.remark }}</view>
    <view class="fixBtn" @click.stop="() => {}">
      <view class="btn">
        <up-button
          v-if="data.billState === 0"
          type="primary"
          @click="handleCancel"
          plain
          size="mini"
          shape="circle"
          text="作废"
        ></up-button>
      </view>
      <view class="btn">
        <up-button
          v-if="data.billState === 0"
          type="primary"
          @click="handleCheck"
          plain
          size="mini"
          shape="circle"
          text="审核"
        ></up-button>
      </view>
    </view>
    <view class="state">{{ data.billStateStr || "未知状态" }}</view>
    <view class="payState">{{ data.paymentStateStr || "未知状态" }}</view>
    <view class="price"
      >预订金额：{{ $u.priceFormat(data.orderAmount, 2) }}</view
    >
  </view>
</template>

<!-- 订货单Item -->
<script setup>
const props = defineProps({
  data: {
    type: Object,
    default() {
      return {};
    },
  },
});
const emits = defineEmits(["check", "cancel", "detail"]);
const handleCancel = () => {
  emits("cancel", props.data);
};
const handleCheck = () => {
  emits("check", props.data);
};
const handleDetail = () => {
  emits("detail", props.data);
};
</script>

<style lang="scss">
.orderListItem {
  background: #ffffff;
  box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  padding: 10px 13px;
  position: relative;
  overflow: hidden;

  .code {
    font-size: 13px;
    color: #4b4e50;
    line-height: 19px;
    margin-bottom: 13px;
  }

  .time {
    font-size: 12px;
    color: #4b4e50;
    line-height: 17px;
    margin-bottom: 11px;
  }

  .remark {
    font-size: 12px;
    color: #4b4e50;
    line-height: 17px;
    margin-bottom: 9px;
  }

  .fixBtn {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .btn {
      width: 69px;

      & + .btn {
        margin-left: 10px;
      }
    }
  }

  .payState {
    position: absolute;
    right: -23px;
    top: 8px;
    height: 20px;
    width: 80px;
    text-align: center;
    line-height: 20px;
    font-size: 11px;
    color: #fff;
    background-color: #ff6105;
    transform: rotate(45deg);
  }

  .state {
    position: absolute;
    top: 11px;
    right: 56px;
    font-size: 12px;
    color: #ff4c4c;
    line-height: 17px;
    padding: 1px 4px 0 6px;
    background: #ffe3db;
    border-radius: 7px;
  }

  .price {
    position: absolute;
    right: 13px;
    top: 41px;
    font-size: 12px;
    color: #4b4e50;
    line-height: 17px;
  }
}
</style>
